<script setup>
import useArticleStore from '@/stores/article/index.js'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router/index.js'

const articleStore = useArticleStore()

const route = useRoute()
//再次刷新页面
const detailNews = (id) => {
  if (route.path.includes('home')) {
    //从主页面进来跳转页面
    router.push({
      path: '/detail',
      query: {
        id: id
      }
    })
  }
  //再次调用接口
  articleStore.getDetailNews(id)
}

const isShow = ref(false)

//热门标题，//TODO接口没有找到
const hotBtn = (newsId) => {
  // articleStore.getCommentFirstListAction(newsId)
}

defineExpose({
  isShow
})
</script>

<template>
  <div class="hot-title" v-if="isShow">
    <div class="header">
      <img src="@/assets/images/hot-title.png" />
      <span>头条文章</span>
    </div>
    <ul class="title">
      <template v-for="(item, index) in articleStore.hotTitleList">
        <li @click="hotBtn(item.id)">
          <span class="num" v-if="index === 0"
            ><img src="@/assets/images/icon_hot_board_stick.svg"
          /></span>
          <span class="num" v-else>{{ index }}</span>
          <p @click="detailNews(item.id)">{{ item.title }}</p>
        </li>
      </template>
    </ul>
  </div>
</template>

<style scoped lang="less">
.hot-title {
  position: fixed;
  top: 0;
  right: 9%;
  margin-top: 20px;
  width: 318px;


  img {
    width: 24px;
    height: 22px;
  }

  span {
    margin-left: 10px;
    font-size: 20px;
  }

  .title {
    li:nth-child(2) .num {
      color: #a82e2e;
    }

    li:nth-child(3) .num {
      color: #f04142;
    }

    li:nth-child(4) .num {
      color: #ff9a03;
    }

    li {
      display: flex;
      padding: 12px 0;
      p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .num {
        width: 24px;
        height: 22px;
        color: #999;
        font-size: 16px;

        img {
          margin-left: -5px;
        }
      }
    }

    p:hover {
      cursor: pointer;
      color: #f04142;
    }
  }
}
</style>
